<script setup>
import { ref } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

import { useRouter,useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute()


const articleModel = ref({
    title:'',
    content:'aaaa'
})
//articleModel.value.content = "aaaaaaaaa"

// 获取到路由跳转时所带的id
const articleId = route.params.id

import {getArticleDetailService} from '@/api/article.js'
const getArticleDetail = async () => {
    const result = await getArticleDetailService(articleId);
    console.log(result.data);

    articleModel.value.title = result.data.title
    articleModel.value.content = result.data.content

}
getArticleDetail()
</script>

<template>
    <el-card class="card-main" shadow="never">
        <div style="font-size:30px;">
            <b>{{ articleModel.title }}</b>
        </div>

        <div> 
            <div v-html="articleModel.content"></div>
        </div>

    </el-card>
</template>


<style lang="scss" scoped>
.card-main {
    margin: 8px 11%;
    height: auto;
    width: 50%;
    overflow: hidden;
    min-height: 85vh;
}

/* 编辑器 */
.editor {
    width: 100%;

    ::v-deep(.ql-editor) {
        min-height: 200px;
    }
}
</style>